<template>
  <div class="">
    <div class="module-card">
      <h3>hover文字，进行提示</h3>
      <div>
        <ToolTip
          :displayTip="displayToolTip"
          effect="light"
          :content="text"
          placement="top"
        >
          <div class="buttonNormal" @click="clickFun" ref="butn1">
            {{ text }}
          </div>
        </ToolTip>
        <ToolTip :displayTip="displayToolTip2" :content="text" placement="left">
          <div class="buttonNormal" @click="displayToolTip2 = !displayToolTip2">
            {{ text }}
          </div>
        </ToolTip>
      </div>
      <div>
        <ToolTip
          :displayTip="displayToolTip3"
          effect="light"
          :content="text"
          placement="bottom"
        >
          <div class="buttonNormal" @click="clickFun3" ref="butn3">
            {{ text }}
          </div>
        </ToolTip>
        <ToolTip
          :displayTip="displayToolTip4"
          :content="text"
          placement="right"
        >
          <div class="buttonNormal" @click="displayToolTip4 = !displayToolTip4">
            {{ text }}
          </div>
        </ToolTip>
      </div>
    </div>

    <div class="module-card">
      <h3>纯CSS+HTML属性（简易结构版）</h3>
      <div>
        <ToolTip2 />
      </div>
    </div>
  </div>
</template>

<script>
import ToolTip from './TtoolTip.vue';
import ToolTip2 from './ToolTip2.vue';
export default {
  props: {},
  components: {
    ToolTip,
    ToolTip2,
  },
  data() {
    return {
      displayToolTip: true,
      displayToolTip2: false,
      displayToolTip3: true,
      displayToolTip4: false,
      text: '这是需要提示的内容， 这是需要提示的内容， 这是需要提示的内容， 这是需要提示的内容， 这是需要提示的内容',
    };
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {},
    // 点击测试：改变元素位置，提示文字的位置是否正确
    clickFun() {
      // this.$refs.butn1.style.marginLeft = '200px';
      this.displayToolTip = !this.displayToolTip;
    },
    // 点击测试：改变元素位置，提示文字的位置是否正确
    clickFun3() {
      // this.$refs.butn3.style.marginLeft = '0';
      this.displayToolTip3 = !this.displayToolTip3;
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.buttonNormal {
  width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 300px;
  margin-right: 20px;
}
</style>
